<template>
	<view class="mask" :class="show ? 'mask-show' : ''" :style="{backgroundColor: maskBg}" @tap="tapMask">
		<view class="popups dark" :style="popupsStyle">
			<text v-if="triangle" class="triangle" :class="dynPlace" :style="dynStyle" />
			<view class="scroll-row" :style="{width:popData.length * 110 + 'rpx'}">
				<view class="scroll-row-view" v-for="(item, idx) in popData" :key="idx" @tap.stop="tapItem(item)">
					<image :src="item.img" mode="" style="width: 30rpx;height: 30rpx;" v-if="item.img"></image>
					<text class="scroll-row-text" :disabled="item.disabled">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @property {String} maskBg 遮罩背景颜色，默认 rgba(0,0,0,0)，不透明 
	 * @property {Boolean} value 显示或隐藏菜单，默认false，true-显示，false-隐藏 
	 * @property {Number} x 长按组件的中心值，单位px
	 * @property {Number} y 长按组件的top或bootom值，单位px
	 * @property {Number} gap
	 * @property {Boolean} triangle 是否显示三角图标，默认true，true-显示，false-隐藏
	 * @property {Array} popData popup的按钮数据
	 * @property {String} direction 排列方向，默认column，支持column和row
	 * @property {String} placement 三角形图标相对于menu菜单的位置，默认top-start
	 * 									top-start、top-end
	 * 									bottom-start、bottom-end
	 * 									top-center、bottom-center
	 */
	let systemInfo = uni.getSystemInfoSync();
	export default {
		name: "yinrh-menu-popup",
		props: {
			maskBg: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			gap: {
				type: Number,
				default: 20
			},
			triangle: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				x: 0,
				y: 0,
				popData: [],
				viewwidth: 0,
				arrowStyle: {}, // triangle的style，确定位置
				dynPlace: '', // 三角形箭头的class字符串
				show: false, // 是否显示遮罩，true-显示，false-不显示
				popupsStyle: {}, // popups的style，确定位置和方向
				dynStyle: {}, //三角形箭头的样式，确定位置
			}
		},
		methods: {
			 showPop(data) {
				this.x = data.x
				this.y = data.y
				this.viewwidth = data.width
				this.dynPlace = data.place
				
				this.popData = JSON.parse(JSON.stringify(data.popData)) 
				this.$nextTick(()=>{
					this.popupsPosition().then(()=>{
						this.show = true
					})
				})
				// setTimeout(async()=>{
				// 	this.show = true
				// })
			},
			/**
			 * 遮罩显示或隐藏
			 */
			tapMask() {
				this.show = false
				this.popData = []
			},
			/**
			 * menu菜单按钮单击事件
			 * @param {Object} item
			 */
			tapItem(item) {
				if (item.disabled) return;
				this.$emit('tapPopup', item);
				// this.$emit('input', !this.value);
				this.show = false
				this.popData = []
			},
			/**
			 * 动态获得y的值
			 * @param {Object} y
			 * @param {Object} gap
			 */
			dynamicGetY(y, gap) {
				let h = systemInfo.windowHeight;
				y = y < gap ? gap : y;
				return h - y < gap ? (h - gap) : y;
			},
			/**
			 * 动态获得x的值
			 * @param {Object} x
			 * @param {Object} gap
			 */
			dynamicGetX(x, gap) {
				let w = systemInfo.windowWidth;
				x = x < gap ? gap : x;
				return w - x < gap ? (w - gap) : x;
			},
			/**
			 * 静态获得x或y的值
			 * @param {Object} v
			 */
			transformRpx(v) {
				return v * systemInfo.screenWidth / 375;
			},
			async popupsPosition() {
				let promise = new Promise((resolve, reject) => {
					this.dynStyle = {}
					uni.createSelectorQuery().in(this).select(".popups").fields({
						size: true,
					}, (data) => {
						let x, y;
						x = this.dynamicGetX(this.x, this.gap);
						y = this.dynamicGetY(this.y, this.gap);
						let _ssw = systemInfo.screenWidth,
							_rpx = uni.upx2px(20),
							_top = y - _rpx - data.height,
							// left = (_ssw - data.width) / 2;
							left = x - data.width / 2 + this.viewwidth / 2,
							right = _ssw - data.width - left;
						
						if (left < 5) {
							left = 5
							//三角的宽度
							let sjw = uni.upx2px(15)
							this.dynStyle = {
								left: `${(x-5)+this.viewwidth/2 - sjw}px`
							};
						}else if (right < 5) {
							left = _ssw - data.width - 5
							//三角的宽度
							let sjw = uni.upx2px(15)
							
							this.dynStyle = {
								left: `${(_ssw - left) - (_ssw - x) + this.viewwidth/2 - sjw}px`
							};
						}
						switch (this.dynPlace) {
							case 'top-center': // 上中，y为bottom
								this.popupsStyle = {
									top: `${y + _rpx}px`,
									left: `${left}px`
								};
								break;
							case 'bottom-center': // 下中，y为top
								this.popupsStyle = {
									top: `${_top}px`,
									left: `${left}px`
								};
								break;
						}
						resolve()
					}).exec();
				})
				return promise
			}
		}
	}
</script>

<style lang="scss" scoped>
	/** mask：遮罩 */
	.mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		visibility: hidden;
		transition: background 0.3s ease-in-out;

		&.mask-show {
			visibility: visible;
		}
	}

	/** menu：菜单弹窗 */
	.popups {
		position: absolute;
		display: flex;
	}

	/** scroll-row：支持横向滑动 */
	.scroll-row {
		background-color: #22232c;
		border-radius: 5px;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(110rpx, 1fr));
		/* 使用auto-fill和minmax来实现动态换行 */
		grid-auto-rows: auto;
		max-width: 550rpx;
	}

	.scroll-row-view {
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.scroll-row-text {
		font-size: 20rpx;
		background-image: linear-gradient(180deg,
				rgba(255, 255, 255, 1) 0,
				rgba(229, 189, 132, 1) 100%);
		color: rgba(255, 255, 255, 1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.triangle {
		width: 0px;
		height: 0px;
	}

	/** dark：popups的theme值，黑底白字 */
	.dark {
		.top-start {
			position: absolute;
			top: -16rpx;
			left: 20px;
			border-width: 0 15rpx 15rpx;
			border-style: solid;
			border-color: transparent transparent #22232c;
		}

		.top-end {
			position: absolute;
			top: -16rpx;
			right: 20px;
			border-width: 0 15rpx 15rpx;
			border-style: solid;
			border-color: transparent transparent #22232c;
		}

		.top-center {
			position: absolute;
			top: -16rpx;
			left: calc(50% - 15rpx / 2);
			border-width: 0 15rpx 15rpx;
			border-style: solid;
			border-color: transparent transparent #22232c;
		}

		.bottom-start {
			position: absolute;
			bottom: -16rpx;
			left: 20px;
			border-width: 15rpx 15rpx 0;
			border-style: solid;
			border-color: #22232c transparent transparent;
		}

		.bottom-end {
			position: absolute;
			bottom: -16rpx;
			right: 20px;
			border-width: 15rpx 15rpx 0;
			border-style: solid;
			border-color: #22232c transparent transparent;
		}

		.bottom-center {
			position: absolute;
			bottom: -16rpx;
			left: calc(50% - 15rpx / 2);
			border-width: 15rpx 15rpx 0;
			border-style: solid;
			border-color: #22232c transparent transparent;
		}
	}
</style>